<template>
	<div style="width: 100%;">
		<el-cascader :size="size" v-model="modelValues" :placeholder="`请选择${memo}`" style="width: 100%;"
			:options="dictList" :filterable="true" @change="change" :props="{ label: 'name', value: 'val' }" />
	</div>
</template>

<script>
	export default {
		props: {
			dictList: {
				type: Array,
				default: () => []
			},
			modelValue: {
				type: [String, Array, Number],
				default: ""
			},
			multiple: {
				type: Boolean,
				default: false
			},
			memo: {
				type: String,
				default: ""
			},
			size: {
				type: String,
				default: "default"
			}
		},
		data() {
			let obj = {
				modelValues: [this.modelValue + ""]
			}
			if (this.modelValue instanceof Array) {
				obj.modelValues = this.modelValue;
			}
			if (this.modelValue instanceof String) {
				obj.modelValues = this.modelValue.split(",");
			}
			return obj;
		},
		methods: {
			change(val) {
				if (val.length > 1 || this.multiple) {
					this.$emit("update:modelValue", val)
				} else {
					this.$emit("update:modelValue", val.length < 1 ? "" : val[0])
				}
			}
		}
	}
</script>

<style>
</style>
